<%--
  Created by IntelliJ IDEA.
  User: 10269
  Date: 2021/2/20
  Time: 16:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户管理</title>

    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">

</head>
<style>
    body{
        padding: 1% 5%;
    }
</style>
<body>

    <p>
        <a href="${pageContext.request.contextPath}/register.jsp">注册</a>
    </p>
    <form id="searchForm" action="">
        <p>
            <span><label for="username"><input id="username" name="username"></label></span>
            <span><label for="phone"><input id="phone" name="phone"></label></span>
        </p>
        <p>
            <span><label for="getUsers"><input id="getUsers" type="button" value="查询"></label></span>
        </p>
    </form>
    <div class="table-responsive">
        <table id="userTable" class="table table-striped" <%--style="visibility: hidden"--%>>
            <caption>用户列表</caption>
            <thead>
            <tr>
                <th>uid</th>
                <th>username</th>
                <th>password</th>
                <th>phone</th>
                <th>createTime</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
    <!-- Small modal -->
    <div class="modal fade bs-example-modal-sm" id="modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <form id="updateForm">
                    <div class="form-group">
                        <label for="updateId">Email address</label>
                        <input type="text" class="form-control" readonly id="updateId" placeholder="id">
                    </div>
                    <div class="form-group">
                        <label for="updateUsername">Email address</label>
                        <input type="text" class="form-control" id="updateUsername" placeholder="username">
                    </div>
                    <div class="form-group">
                        <label for="updatePassword">Password</label>
                        <input type="text" class="form-control" id="updatePassword" placeholder="Password">
                    </div>
                    <div class="form-group">
                        <label for="updatePhone">Password</label>
                        <input type="text" class="form-control" id="updatePhone" placeholder="phone">
                    </div>
                    <input type="button" class="btn btn-primary" id="updateConfirm" value="提交">
                </form>
            </div>
        </div>
    </div>
</body>
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script>

    $("#updateConfirm").click(function () {

        let updateData = {};
        updateData = {
            uid:$("#updateId").val(),
            username:$("#updateUsername").val(),
            password:$("#updatePassword").val(),
            phone:$("#updatePhone").val(),
        };
        $.ajax(
            {
                type:'POST',
                url:"${pageContext.request.contextPath}/updateUser",
                data:JSON.stringify(updateData),
                success: function(result){
                    $("#modal").modal('hide');
                    console.log(result);
                    getAllUsers()
                },
                dataType:'json',
                contentType:"application/json;charset=UTF-8"
            }
        )

    });

    $(document).ready(function () {
        getAllUsers();
    });

    function deleteUser(uid){

        $.ajax(
            {
                type:'GET',
                url:"${pageContext.request.contextPath}/deleteUser?uid="+uid,
                success: function(result){
                    console.log(result);
                    getAllUsers()
                },
                // dataType:'json',
                // contentType:"application/json;charset=UTF-8"
            }
        )
    }

    function updateUser(uid) {
        $("#updateId").val("");
        $("#updateUsername").val("");
        $("#updatePassword").val("");
        $("#updatePhone").val("");
        $.ajax(
            {
                type:'GET',
                url:"${pageContext.request.contextPath}/findUserByUid?uid="+uid,
                success: function(result){
                    let user = result.content;
                    $("#updateId").val(user.uid);
                    $("#updateUsername").val(user.username);
                    $("#updatePassword").val(user.password);
                    $("#updatePhone").val(user.phone);
                    console.log(result)
                },
                dataType:'json',
                contentType:"application/json;charset=UTF-8"
            }
        )
    }

    function getAllUsers(){
        let data = {
            username:"",
            phone:""
        };

        $.ajax(
            {
                type:'POST',
                url:"${pageContext.request.contextPath}/getUsers",
                data:JSON.stringify(data),
                success: function(result){
                    $("#userTable tbody").empty();
                    createTable(result.content);
                    console.log(result)
                },
                dataType:'json',
                contentType:"application/json;charset=UTF-8"
            }
        )
    }

    let $row = ``;

    function createTable (users) {
        for (let i = 0;i<users.length;i++){
            $row = $(
                `<tr id="#`+users[i].uid+`">
                    <th>`+users[i].uid+`</th>
                    <th>`+users[i].username+`</th>
                    <th>`+users[i].password+`</th>
                    <th>`+users[i].phone+`</th>
                    <th>`+users[i].createTime+`</th>
                    <th>
                        <button type="button" class="btn btn-warning" onclick="deleteUser(`+ users[i].uid +`)">删除</button>
                        <button type="button" class="btn btn-default" onclick="updateUser(`+ users[i].uid +`)" data-toggle="modal" data-target=".bs-example-modal-sm">编辑</button>
                    </th>

                </tr>`);
            $("#userTable tbody").append($row);
        }
    }

    $("#getUsers").click(function () {

        let data = {
            username:$("#username").val(),
            phone:$("#phone").val()
        };

        $.ajax(
            {
                type:'POST',
                url:"${pageContext.request.contextPath}/getUsers",
                data:JSON.stringify(data),
                success: function(result){
                    $("#userTable tbody").empty();
                    createTable(result.content);
                    console.log(result)
                },
                dataType:'json',
                contentType:"application/json;charset=UTF-8"
            }
        )
    });

</script>
</html>
